<template>
  <div>
    <div class="fz-18" style="font-weight:bold;color: #1D2129;">当前活动：{{ activityInfo.title }}</div>
    <div class="disFlx _mt-24">
      <span class="fz-14">公开人脉广场：</span>
      <div class="_ml-10">
        <div>
          <SSwitch
            :modelValue="form.displayRegister"
            checkedChildren="是"
            :checkedValue="1"
            unCheckedChildren="否"
            :unCheckedValue="0"
            @update:modelValue="onChange"
          />
          <span class="_ml-10" style="color: #86909C"
            >（开启后所有人可看已报名的、会内人脉信息，可增加参会人员的获得感，促进更多人报名参会）</span
          >
        </div>
        <div v-if="form.displayRegister" class="disFlxAC _p-20 _mt-10" style="background-color: #F7F8FA;">
          <div class="disFlxAC">
            台卡二维码入口：
            <a-popover title="台卡二维码入口" placement="rightBottom">
              <template slot="content">
                可以将二维码印刷在桌卡等地方，方便参加活动的人了解活动参与者，并可通过人脉广场链接合作，给活动参与者更大的获得感。<br />
                台卡二维码需要在活动发布后前往【活动管理】-【签到码/物料管理】-【大屏/台卡物料管理】下载二维码；
              </template>
              <a-icon type="question-circle" style="color:#FF7D00 ;" />
            </a-popover>
          </div>
          <div class="_ml-10 _mr-10">
            <ImgOrVideo :item="{ url: wxQrcode }" preview :showDownload="true" :width="150" :height="150" />
          </div>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
import { getDeccaMaterial, editSection } from '@/api/activity/activity'
import SSwitch from '@/components/Switch'
import ImgOrVideo from '@/components/ImgOrVideo'
export default {
  components: {
    SSwitch,
    ImgOrVideo
  },
  props: {
    titleKey: {
      type: String,
      default: ''
    },
    activityInfo: {
      type: Object,
      default: () => ({})
    }
  },
  watch: {
    titleKey() {
      this.queryDeccaMaterial()
    }
  },
  data() {
    return {
      wxQrcode: '',
      form: {
        displayRegister: 0
      }
    }
  },
  created() {
    this.queryDeccaMaterial()
  },
  methods: {
    async onChange(checked) {
      await editSection({ displayRegister: checked, id: this.$route.query.activityId })
      this.queryDeccaMaterial()
    },
    async queryDeccaMaterial() {
      const res = await getDeccaMaterial(this.$route.query.activityId)
      this.form.displayRegister = res.data.displayRegister
      this.wxQrcode = res.data.wxQrcode
    }
  }
}
</script>
